文档 / 模板开发

模板结构:模板 = 壳,数据永不绑定模板

这是 OCPS 模板体系最重要的设计原则:模板是渲染壳(页面编排 + 主题 + 种子示例),数据永远属于应用。切换模板只换壳,应用在内容/电商/分类等子平台的数据零改动。

模板 JSON 结构

一个模板的 template 字段结构如下:

{
  "theme_default": "starlight",
  "pages": {
    "home":   { "title": "首页", "blocks": [] },
    "products": { "title": "产品库", "blocks": [] },
    "reviews":  { "title": "评测", "blocks": [] }
  },
  "contracts": {
    "commerce": ["commerce.products"],
    "content":  ["content.contents"],
    "category": ["category.categories"],
    "themes":   ["themes.read"],
    "i18n":     ["i18n.read"]
  },
  "requires": [
    { "platform": "commerce", "scope": "commerce:read" },
    { "platform": "content",  "scope": "content:read" },
    { "platform": "category", "scope": "category:read" },
    { "platform": "themes",   "scope": "themes:read" },
    { "platform": "i18n",     "scope": "i18n:read" }
  ],
  "params": {
    "site_name":     { "label": "站点名称", "type": "string", "default": { "en": "My Site", "cn": "我的站点" } },
    "default_lang":  { "label": "默认语言", "type": "select", "options": ["en","cn","tw","jp","de","fr","es","ar"], "default": "en" },
    "theme_default": { "label": "默认主题", "type": "select", "options": ["starlight","aurum","noir"], "default": "starlight" }
  },
  "settings": {
    "site_name": { "en": "My Site", "cn": "我的站点" },
    "theme_default": "starlight"
  }
}

各字段含义

字段说明
theme_default安装后应用的默认主题(皮肤)
pages页面定义:key(路由段)+ 标题 + 区块数组
contracts数据契约声明:模板需要哪些数据源
requires安装前提:目标应用必须已授权这些 scope,否则安装被拒(409 CONTRACT_UNSATISFIED)
params安装时可由用户填写的参数(站点名/默认语言/主题…)
settings站点设置默认值(含 8 语言)
seed种子示例数据(仅演示,不写入正式数据)

区块(blocks)

每个页面由区块组成,区块是页面的最小编排单元:

{
  "id": "blk-xxxxxxxx",
  "type": "hero",
  "title": "首页主视觉",
  "sort": 1,
  "config": {
    "badge": "NEW",
    "title": "欢迎来到我的站点",
    "sub": "一句话副标题"
  },
  "bind": {
    "source": "commerce.products",
    "category_slug": "flathead",
    "limit": 6,
    "mode": "featured"
  }
}

内置区块类型

类型说明常用配置
hero主视觉横幅badge / title / sub
features特性宫格raw(items 数组 JSON)
stats数据指标raw(metrics 数组 JSON)
cta行动号召title / sub
image_banner图片横幅image
html自定义 HTMLhtml
text文本段落title / body
cards卡片组raw(items)
product_grid产品列表bind 数据源
article_grid文章列表bind 数据源
categories分类导航bind 数据源
form联系表单submit

数据绑定(bind)

动态区块绑定子平台数据源:

{
  "source": "commerce.products",     // 数据源
  "category_slug": "flathead",       // 分类过滤(可选)
  "limit": 6,                        // 数量
  "mode": "featured"                 // featured / latest / hot
}

支持的数据源:commerce.productscontent.contentscategory.categories

模板的两种编辑方式

  1. 可视化编辑(推荐):平台后台模板编辑页 → "🎨 可视编辑"——全屏三栏:页面/区块列表 + 实时预览 + 人性化配置表单,另有树形 JSON / 原始 JSON 两个 Tab 同步编辑;
  2. 代码方式:直接编辑模板 JSON(适合模板开发者)。

安装与回滚

  • 安装 = 备份当前模板层配置 → 写入新模板 → 预览态;
  • 激活 = 正式生效(同一应用同时只有一个激活模板);
  • 回滚 = 恢复安装前的 page_blocks/theme/settings,一键完成。